<mat-card>
    <mat-card-title>注册</mat-card-title>
    <mat-card-content>
        <form class="example-form" [formGroup]="registerFrom" (ngSubmit)="onSubmit(registerFrom,$event)">
            <mat-form-field>
                <input matInput placeholder="您的email" formControlName="email">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="您的姓名" formControlName="name">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="您的密码" [type]="hide ? 'password' : 'text'" formControlName="password">
                <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
                    [attr.aria-pressed]="hide" type="button">
                    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                </button>
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="请从新输如密码" [type]="hide ? 'password' : 'text'" formControlName="repeat">
                <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
                    [attr.aria-pressed]="hide" type="button">
                    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                </button>
            </mat-form-field>
            <div class="full-width control-padding">
                <app-age-input formControlName="dateOfBirth"></app-age-input>
             </div>

            <app-image-list-select [useSvgIcon]="true" [cols]="6" [title]="'选择头像: '" [items]="items" formControlName="avatar">
            </app-image-list-select>
            
            <button mat-raised-button color="primary" type="submit">注册</button>
        </form>

    </mat-card-content>
    <mat-card-actions>
        <p>已经注册？<a routerLink="/login">登陆</a></p>
        <p>忘记密码<a href="##">找回密码</a></p>
    </mat-card-actions>
</mat-card>